<template>
	<view class="main">
		<!--公共头部-->
		<my-header :background="background" title="商务管理编辑"></my-header>

		<view class="main-body-e">
			<u-form :model="form" ref="uForm">
				<!--合作模式-->
				<view>
					<u-form-item :required="true" left-icon="chrome-circle-fill" label-width="170" label="合作模式："
						prop="accountBookName" :left-icon-style="labSty" :label-style="labSty">
						<u-input v-model="form.accountBookName" placeholder="请选择账本" :custom-style="jinengStyle"
							type="select" :select-open="zhangbenShow" :border="true" @click="zhangbenShow = true" />
						<u-select v-model="zhangbenShow" mode="mutil-column-auto" :list="zhangbenList"
							@confirm="zhangbenCallback"></u-select>
					</u-form-item>
				</view>
				<!--合作模式-->
				<view class="dis_flex fle-flo hzms">
					<view class="hzms-auto">
						<u-form-item label-width="130" label="进场费：" prop="name" :left-icon-style="labSty"
							:label-style="labSty" :border-bottom="false">
							<u-input placeholder=" " :custom-style="jinengStyle" v-model="form.name1" :clearable="false"
								:border="true" />
						</u-form-item>
					</view>
					<view class="hzms-auto">
						<u-form-item label-width="130" label="租金：" prop="name" :left-icon-style="labSty"
							:label-style="labSty" :border-bottom="false">
							<u-input placeholder=" " :custom-style="jinengStyle" v-model="form.name2" :clearable="false"
								:border="true" />
						</u-form-item>
					</view>
					<view class="hzms-auto">
						<u-form-item label-width="130" label="押金：" prop="name" :left-icon-style="labSty"
							:label-style="labSty" :border-bottom="false">
							<u-input placeholder=" " :custom-style="jinengStyle" v-model="form.name3" :clearable="false"
								:border="true" />
						</u-form-item>
					</view>
					<view class="hzms-auto">
						<u-form-item label-width="130" label="分成比例：" prop="name" :left-icon-style="labSty"
							:label-style="labSty" :border-bottom="false">
							<u-input placeholder=" " :custom-style="jinengStyle" v-model="form.name4" :clearable="false"
								:border="true" />
						</u-form-item>
					</view>
					<view class="hzms-auto">
						<u-form-item label-width="130" label="预付款：" prop="name" :left-icon-style="labSty"
							:label-style="labSty" :border-bottom="false">
							<u-input placeholder=" " :custom-style="jinengStyle" v-model="form.name5" :clearable="false"
								:border="true" />
						</u-form-item>
					</view>
				</view>
				<!--收款账户-->
				<view>
					<view>
						<u-form-item :required="true" left-icon="chrome-circle-fill" label-width="170" label="收款账户："
							:left-icon-style="labSty" :label-style="labSty"></u-form-item>
					</view>
				</view>
				<!--单选框-->
				<view class="mar-top-10">
					<u-radio-group width="33%" v-model="radioValue">
						<u-radio @change="radioGroupChange(item)" v-for="(item, index) in radioList" :key="index" :name="item.name"
							:disabled="item.disabled">
							<u-icon style="margin-top:7px;" :name="item.url" color="#2979ff" size="40"></u-icon>
						</u-radio>
					</u-radio-group>
				</view>
				<!--银行卡表单-->
				<view class="dis_flex fle-flo hzms mar-top-10" v-show="yhkShow">
					<view class="hzms-auto">
						<u-form-item label-width="130" label="户名：" prop="name" :left-icon-style="labSty"
							:label-style="labSty">
							<u-input placeholder="请输入户名" :custom-style="jinengStyle" v-model="form.nam1" :clearable="false"/>
						</u-form-item>
					</view>
					<view class="hzms-auto">
						<u-form-item label-width="130" label="开户行：" prop="name" :left-icon-style="labSty"
							:label-style="labSty">
							<u-input placeholder="请输入开户行" :custom-style="jinengStyle" v-model="form.nam2" :clearable="false"/>
						</u-form-item>
					</view>
					<view class="hzms-auto">
						<u-form-item label-width="130" label="账号：" prop="name" :left-icon-style="labSty"
							:label-style="labSty">
							<u-input placeholder="请输入账号" :custom-style="jinengStyle" v-model="form.nam3" :clearable="false"/>
						</u-form-item>
					</view>
					<view class="hzms-auto">
						<u-form-item label-width="170" label="开户网点名称：" prop="name" :left-icon-style="labSty"
							:label-style="labSty">
							<u-input placeholder="请输入开户网点名称" :custom-style="jinengStyle" v-model="form.nam4" :clearable="false"/>
						</u-form-item>
					</view>
				</view>
				<!--微信表单表单-->
				<view class="dis_flex fle-flo hzms mar-top-10" v-show="wxShow">
					<view class="hzms-auto">
						<u-form-item label-width="150" label="微信名：" prop="name" :left-icon-style="labSty"
							:label-style="labSty">
							<u-input placeholder="请输入微信名" :custom-style="jinengStyle" v-model="form.nam5" :clearable="false"/>
						</u-form-item>
					</view>
					<view class="hzms-auto">
						<u-form-item label-width="150" label="微信号：" prop="name" :left-icon-style="labSty"
							:label-style="labSty">
							<u-input placeholder="请输入微信号" :custom-style="jinengStyle" v-model="form.nam6" :clearable="false"/>
						</u-form-item>
					</view>
				</view>
				<!--支付宝表单-->
				<view class="dis_flex fle-flo hzms mar-top-10" v-show="zfbShow">
					<view class="hzms-auto">
						<u-form-item label-width="150" label="支付宝账号：" prop="name" :left-icon-style="labSty"
							:label-style="labSty">
							<u-input placeholder="请输入支付宝账号" :custom-style="jinengStyle" v-model="form.nam8" :clearable="false"/>
						</u-form-item>
					</view>
					<view class="hzms-auto">
						<u-form-item label-width="150" label="姓名(实名)：" prop="name" :left-icon-style="labSty"
							:label-style="labSty">
							<u-input placeholder="请输入姓名(实名)" :custom-style="jinengStyle" v-model="form.nam7" :clearable="false"/>
						</u-form-item>
					</view>
				</view>
				<!--协议期-->
				<view>
					<view>
						<u-form-item :required="true" left-icon="chrome-circle-fill" label-width="130" label="协议期：" prop="name" :left-icon-style="labSty" :label-style="labSty">
							<u-input @click="show = true" placeholder="20 - -  至  20 - -" :custom-style="jinengStyle" v-model="form.rlTime" :clearable="false" :disabled="true"/>
						</u-form-item>
					</view>
				</view>
				<view><u-calendar v-model="show" :mode="mode" @change="change"></u-calendar></view>
				<view class="address" style="margin:30rpx 0 0rpx 0;">
					<button @click="cancel()" type="warn">取消</button>
					<button @click="submit()" style="background:#0051BA" type="primary">提交</button>
				</view>
				<view style="margin-top:20px;">
					<text style="color:red;">温馨提示：红色星为必填项，</text>
					<text style="color:#0051BA;">蓝色星为选填项</text>
				</view>
			</u-form>
		</view>
	</view>
</template>

<script>
	import myHeader from '@/components/workbench/header.vue';
	export default {
		data() {
			return {
				background : {
					backgroundColor : '',
				},
				mode: 'range' ,
				show : false,
				yhkShow : true,
				wxShow : false,
				zfbShow : false,
				radioList: [{
						name: '银行卡',
						disabled: false,
						url : 'https://oaxiaochengxu.0871.cn/yinhangka.png',
					},
					{
						name: '微信',
						disabled: false,
						url : 'https://oaxiaochengxu.0871.cn/weixin.png',
					},
					{
						name: '支付宝',
						disabled: false,
						url : 'https://oaxiaochengxu.0871.cn/zhifubao.png',
					}
				],
				radioValue: '银行卡',
				zhangbenList: [{
						label: '租金',
						value: 1,
					},
					{
						label: '分成',
						value: 2,
					},
					{
						label: '预付分成',
						value: 3,
					},
					{
						label: '进场费&分成',
						value: 4,
					},
					{
						label: '进场费&租金',
						value: 5,
					},
				],
				zhangbenShow: false,
				form: {
					accountBookName: '',
					rlTime : '',
				},
				labSty: {
					color: 'rgba(0, 81, 186, 1)',
				},
			}
		},
		components: {
			myHeader,
		},
		onLoad() {},
		methods: {
			// 取消事件
			cancel(){
				this.redirectTo('/pages/partner/details')
			},
			// 协议期选择事件
			change(e) {
				this.form.rlTime = e.startDate + ' 至 ' + e.endDate
			},
			// 单选框事件
			radioGroupChange(e){
				this.yhkShow = false
				this.wxShow  = false
				this.zfbShow = false
				if( e.name == '银行卡' ){
					this.yhkShow = true 
				}
				if( e.name == '微信' ){
					this.wxShow = true 
				}
				if( e.name == '支付宝' ){
					this.zfbShow = true 
				}
				console.log(e)
			},
			// 所属账本事件
			zhangbenCallback(e) {
				this.form.accountBookName = e[0].label
			},
		},
	}
</script>

<style>
	.address {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10rpx;
	}

	.address button {
		font-size: 13px;
		width: 140px;
		border-radius: 20px;
	}
	.hzms-auto {
		width: 80%;
		margin: auto;
	}

	.u-radio {
		justify-content: center !important;
	}

	.hzms .u-input--border {
		height: 46rpx !important;
	}

	.hzms .u-input__input {
		min-height: 46rpx !important;
	}

	.hzms .u-form-item {
		padding: 0px !important;
	}

	/*表单字体调整*/
	.u-form-item {
		padding: 5px !important;
	}

	.u-input--border {
		height: 60rpx !important;
	}

	.u-input__input {
		font-size: 22rpx !important;
		min-height: 60rpx !important;
	}
</style>
